import React, { useState, useEffect } from 'react';
import styles from './index.less';

import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';

const data = [
  {
    value: 455,
    title: '已拆迁',
    statusValue: [5, 6, 7],
  },
  {
    value: 355,
    title: '拆迁中',
    statusValue: [3, 4],
  },

  {
    value: 24,
    title: '未拆迁',
    statusValue: [1, 2],
  },
];

const total = data.reduce((r, { value }) => r + value, 0);

const Chart3 = ({ toggleVisibleBuilding }) => {
  const renderChart = (select, value) => {
    const arr = [];

    data.forEach(sonItem => {
      arr.push(
        {
          name: sonItem.title,
          value: sonItem.value,
          labelLine: {
            show: false,
          },
          itemStyle: {
            color: select === sonItem.title ? 'rgba(19, 194, 194, 1)' : 'RGBA(129, 130, 132, 0.7)',
          },
          emphasis: {
            labelLine: {
              show: false,
            },
          },
        },
        {
          name: '',
          value: total * 0.02,
          itemStyle: {
            color: 'rgba(0,0,0,0)',
          },
        },
      );
    });

    return arr;
  };

  const getAnalysisChartCfg = (data, value) => {
    let options = {
      toolbox: {
        show: false,
      },
      title: [
        {
          text: `${((value * 100) / total).toFixed()} %`,
          top: '35%',
          left: '50%',
          textAlign: 'center',
          textStyle: {
            fontSize: 22,
            fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
            fontWeight: 'bold',
            color: '#2FB0FF',
            lineHeight: 30,
            verticalAlign: 'bottom',
          },
        },
      ],
      series: [
        {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['83%', '95%'],
          hoverAnimation: false,
          data: renderChart(data),
          itemStyle: {
            normal: {
              // borderColor: 'RGBA(26, 29, 31, 1)',
              // borderWidth: 4,
            },
          },
          label: {
            normal: {
              show: false,
            },
          },
        },
        {
          type: 'liquidFill',
          radius: '60%',
          center: ['50%', '50%'],
          data: [0.5], // data个数代表波浪数
          backgroundStyle: {
            borderWidth: 1,
            color: 'rgba(255, 255, 255, 0.0)',
          },
          label: {
            normal: {
              show: false,
            },
          },
          color: ['rgba(255, 255, 255, 0.2)'],
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(255, 255, 255, 0.2)',
            },
          },
        },
      ],
    };

    return options;
  };
  const [current, setCurrent] = useState(data[0].title);
  const [dataOption, setDataOption] = useState(getAnalysisChartCfg(data[0].title, data[0].value));

  const renderList = () => {
    return (
      <div className={styles.itemWrap}>
        {data.map(item => {
          return (
            <div
              className={kls(styles.item, { [styles.selected]: current === item.title })}
              key={item.title}
              onClick={() => {
                setCurrent(item.title);
                setDataOption(getAnalysisChartCfg(item.title, item.value));
                // 切换建筑底面图层的显影
                // toggleVisibleBuilding(item.statusValue)
              }}
            >
              <div className={styles.itemTop}>
                <div className={styles.itemTitle}>
                  {/* <div className={styles.selectedDecorate}></div> */}
                  {item.title}
                </div>
                <div className={styles.itemValue}>{item.value}</div>
              </div>

              <div className={styles.itemBottom}>
                <div className={styles.itemBottomL}></div>
                <div className={styles.itemBottomR}></div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };
  return (
    <div className={styles.box}>
      <div className={styles.boxInner}>
        <EchartsWrap option={dataOption} style={{ width: '140px', height: '140px' }} />

        <div className={styles.wrapRight}>{renderList()}</div>
      </div>
    </div>
  );
};
export default Chart3;
